const path = require('path')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const BaseConfig = require('./webpack.config.js')
const { merge } = require('webpack-merge')
const CosBuildWebpackPlugin = require('./plugins/CosBuildWebpackPlugin.js')

module.exports = merge(BaseConfig, {
    //使用production，默认也会将js进行压缩，每次压缩的时候如果js里面有未使用的变量或者函数，注释这些，都不会打包进去，这些是默认的
    mode: 'production',
    //兼容性（浏览器不同）
    //css兼容 --webkit、--o
    module: {
        rules: [
            //css兼容
            {
                test: /\.css$/,
                //postcss 后处理器 （写完css之后，自动去加上浏览器内核的前缀）
                //sass、less预处理器
                use: [MiniCssExtractPlugin.loader, 'css-loader',
                {
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                            // postcss-preset-env 能够解决大部分浏览器的样式兼容问题
                            plugins: ['postcss-preset-env', 'autoprefixer'],
                        },
                    },
                }]
            },
            //js兼容
            {
                test: /\.m?js$/,
                //排除文件夹查找
                exclude: /(node_modules|bower_components)/,
                use: {
                    //babel转换器，主要功能是将旧版本浏览器或者是其他环境将js新特征向后兼容（向低版本兼容）
                    loader: 'babel-loader',
                    options: {
                        //@babel/preset-env 把高版本的ES语法兼容到ES5以下
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    optimization: {
        minimizer: [
            // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
            //将三个点打开，不然前面的压缩loader会失效，只会压缩最后一个
            `...`,
            new CssMinimizerPlugin(),
        ],
    },
    plugins: [new MiniCssExtractPlugin({
        //压缩css,会把css都放到style标签里面，style标签在bundle包里面，就是入口文件，样式写的越多，bundle体积越大，所以css过多的时候页面就会卡很久
        //webpack还可以建设http请求，比如ajax，之前每次都要获取一次，现在只要获取一次就可以了，缺点就是捆绑包太大，因为还有css这些，这时候可以会影响页面的加载，所以这时候
        //就使用MiniCss把css分离出去，分类过程中用CssMinimizerPlugin压缩一下，也属于优化的一种
        filename: "css/[contenthash:6].css"
    }),
    //上传cos的自定义插件
    new CosBuildWebpackPlugin()
    ],
    //解析模块
    resolve: {
        //webpack默认查找机制
        //(1)node_modules/webpack/bin/node_modules
        //(2)node_modules/webpack/node_modules
        //(3)node_modules
        //这样查找就很慢，要每一层的找，所以我们可以修改他的匹配机制，达到快速打包效果
        //文件后缀名查找顺序
        //引入文件的时候，不加后缀名，webpack自动按照默认的查找顺序去匹配文件
        //所以导入js的时候不用写js后缀，因为默认先找js
        //import "./index"  ---> index.js
        extensions: ['.js', '.json', '.css', '.scss'],
        //路径设置别名，node里面找路径都不是通过../找，都是通过path中间件找
        alias: {
            "@": path.resolve(__dirname, 'src'),
            "@comjs": path.resolve(__dirname, 'src/js'),
        }
    },


})